<template>
  <view class="f-page">
    <u-gap height="5"></u-gap>
    <u-search placeholder="搜索古诗" v-model="listQuery.keyword" clearabled :show-action="false"    @clickIcon="click" @search="click"></u-search>
    <u-gap height="20"></u-gap>
    <u--text type="info" :size="15" text="热门搜索"></u--text>
    <u-gap height="5"></u-gap>
    <view class="u-demo-block__content">
      <view class="f-page__tag-item"><u-tag type="info" text="李白" plain/></view>
      <view class="f-page__tag-item"><u-tag type="info" text="蜀道难" plain/></view>
      <view class="f-page__tag-item"><u-tag type="info" text="蜀道难" plain/></view>
      <view class="f-page__tag-item"><u-tag type="info" text="赠孟浩然" plain/></view>
      <view class="f-page__tag-item"><u-tag type="info" text="南陵别儿童入京" plain/></view>
    </view>
    <u-gap height="20"></u-gap>
    <u--text type="info" :size="15" text="类型"></u--text>
    <view class="u-demo-block__content">
      <view class="f-page__tag-item"><u-tag type="success" text="李白" size="mini" shape="circle"/></view>
      <view class="f-page__tag-item"><u-tag type="success" text="蜀道难" size="mini" shape="circle"/></view>
    </view>
    <u-gap height="20"></u-gap>
    <view v-if="poetList.length > 0">
      <u--text type="info" :size="15" text="诗人"></u--text>
      <u-cell-group>
        <u-cell v-for="(item, index) in poetList" :key="index" :title="item.name" :value="item.dynasty" :titleStyle="style.titleStyle"></u-cell>
      </u-cell-group>
    </view>
    <u-gap height="40"></u-gap>
    <view v-if="poemList.length > 0">
      <u--text type="info" :size="15" text="诗句"></u--text>
      <u-cell-group>
        <u-cell v-for="(item, index) in quoteList" :key="index" :title="item.title" :value="item.origin" :titleStyle="style.titleStyle"
        @click="clickPoem(item.id)"></u-cell>
      </u-cell-group>
    </view>
    <u-gap height="40"></u-gap>
    <view v-if="poemList.length > 0">
      <u--text type="info" :size="15" text="诗词"></u--text>
      <u-cell-group>
        <u-cell v-for="(item, index) in poemList" :key="index" :title="item.title" :value="'['+item.dynasty+']'+item.author" :titleStyle="style.titleStyle"
        @click="clickPoem(item.id)"></u-cell>
      </u-cell-group>
    </view>
  </view>
</template>

<script>
  import { fetchPoetList,fetchPoemList,fetchQuoteList } from '@/api/poetry';
	export default {
		data() {
			return {
        style: {
          fontSize: 15,
          titleStyle: {'font-size': '24rpx','color': '#606266'}
        },
        listQuery: {page: 1,keyword: ''},
        poetList: [],
        poemList: [],
        quoteList: []
			}
		},

		methods: {
      navTo(url,query) {
        uni.$u.route(url, query)
      },

			click() {
       this.listQuery.page = 1
       this.poetList = []
       this.poemList = []
       this.quoteList = []
       if(this.listQuery.keyword === ''){
         return
       }
       this.searh()
      },
      searh() {
        fetchPoetList({params: this.listQuery,custom: { auth: true,toast: false }}).then(response => {
          this.poetList = this.poetList.concat(response.data.records)
        })
        fetchPoemList({params: this.listQuery,custom: { auth: true,toast: false }}).then(response => {
          this.poemList = this.poemList.concat(response.data.records)
        })
        fetchQuoteList({params: this.listQuery,custom: { auth: true,toast: false }}).then(response => {
          this.quoteList = this.quoteList.concat(response.data.records)
        })
      },
      clickPoem(poemId) {
        this.navTo('/pagework/poetry/detail',{id: poemId})
      }
		}
	}
</script>

<style lang="scss">

  .u-demo-block__content{
    flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
  }
  .f-page__tag-item {
		margin-right: 5px;
	}
</style>
